$(function(){
  class Small_pic{
    constructor(){
      this.list = document.querySelector('.small-pic .list')
      this.getdata();
      this.bindEvent();
    }

    //获取数据
    getdata(){
      let options = {
        url :'../../static/data/index/sponsor.json',
      }

      axios(options).then(res=>{
        this.render_pic(res.data)
        const observer = lozad();
        observer.observe();
      })
    }
    //渲染页面
    render_pic(data){
      this.list.innerHTML = data.map(item=>`<li class='brand-item'>
                                                <img class='lozad' data-src='${item.src}'>
                                                <div class='brand-mask'></div>
                                              </li>
                                            `).join('')
      
      $('.small-pic .list').append(`<li class='brand-item'>
        <div class='change_small'>
          <i><svg t="1631192361391" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2182" width="200" height="200"><path d="M874.666667 490.666667c-12.8 0-21.333333 8.533333-21.333334 21.333333 0 187.733333-153.6 341.333333-341.333333 341.333333-130.133333 0-249.6-76.8-307.2-192H256c12.8 0 21.333333-8.533333 21.333333-21.333333s-8.533333-21.333333-21.333333-21.333333H149.333333c-12.8 0-21.333333 8.533333-21.333333 21.333333v106.666667c0 12.8 8.533333 21.333333 21.333333 21.333333s21.333333-8.533333 21.333334-21.333333v-59.733334c66.133333 125.866667 196.266667 209.066667 341.333333 209.066667 211.2 0 384-172.8 384-384 0-12.8-8.533333-21.333333-21.333333-21.333333zM874.666667 256c-12.8 0-21.333333 8.533333-21.333334 21.333333v59.733334C787.2 209.066667 657.066667 128 512 128 300.8 128 128 300.8 128 512c0 12.8 8.533333 21.333333 21.333333 21.333333s21.333333-8.533333 21.333334-21.333333c0-187.733333 153.6-341.333333 341.333333-341.333333 130.133333 0 249.6 74.666667 307.2 192H768c-12.8 0-21.333333 8.533333-21.333333 21.333333s8.533333 21.333333 21.333333 21.333333h106.666667c12.8 0 21.333333-8.533333 21.333333-21.333333v-106.666667c0-12.8-8.533333-21.333333-21.333333-21.333333z" p-id="2183"></path></svg></i>
          <span>换一换</span>
        </div>
        <a class='cont'><a>
      </li>`)

      this._li = Array.from(document.querySelectorAll('.small-pic .list .brand-item'));
      this._mark = Array.from(document.querySelectorAll('.small-pic .list .brand-item .brand-mask'));
      
      this._mark.forEach((item,index)=>{
        let html = `<span>${data[index].msg}</span>`
        item.innerHTML = html;
      })
      
      this._mark.forEach(item=>{
        item.onmouseenter = function(){
          $(this).css({
            opacity : .9
          })
        }
        item.onmouseleave = function(){
          $(this).css({
            opacity : 0
          })
        }
        
      })

    }
    bindEvent(){
      $(this.list).on('click','.cont',()=>{
        $('.small-pic .list .brand-item').each((index,item)=>{
          let _ran = Math.random()*2;
          $(item).css({
            transitionDelay:_ran +'s'
          })
          // item.style.transitionDelay = _ran +'s'
          console.log(_ran);

          $(item).addClass('active')
          setTimeout(()=>{
            $(item).removeClass('active')
          },4000)
        })
      })
    }

  }

  new Small_pic()
})